import React from 'react'
import type { INewDataList } from './interface';
import { useNavigate } from 'react-router-dom'
import { Button, Typography } from 'antd';
import MoreLink from './MoreLink';
import './index.less'

interface IProps {
  title: string;
  data: INewDataList;
  moreLink?: string;
  imgSize?: {
    width: string;
    height: string;
  };
}

const NewsList: React.FC<IProps> = ({
  title,
  data,
  moreLink,
  imgSize,
}) => {
  const navigate = useNavigate();
  return (
    <div className="news-container">
      <div className="news-title">
        <div>
          <h1 style={{ fontSize: '24px' }}>{title}</h1>
        </div>
        {moreLink ? <MoreLink url={moreLink} /> : null}
      </div>
      <div className="news-list">
        {
          data && data.map(item => {
            return (<div key={item.id} onClick={() => { navigate(`/news/detail/${item.id}`) }} className='news-item'>
              <div className='news-image-container'>
                <img src={item.imgUrl} style={{
                  ...imgSize
                }}></img>
              </div>
              <div className='news-content-container' style={{
                height: imgSize?.height
              }}>
                <div><Typography.Text style={{ fontSize: '16px', fontWeight: 'bold' }}>{item.title}</Typography.Text></div>
                <div><Typography.Text style={{ fontSize: '14px', lineHeight: '24px', overflow: 'hidden' }}>{item.content}</Typography.Text></div>
              </div>
            </div>)
          })
        }
      </div>
    </div>
  )
}

export default NewsList;